<template>
  <div>
    <el-card class="box-card">
      <div class="head">
        <p>投标时间筛选:</p>
        <el-col style="margin-left: 10px" :span="4">
          <el-time-picker
            placeholder="选择开始时间"
            v-model="mytime.startTime"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
        <el-col :span="4">
          <el-time-picker
            placeholder="选择结束时间"
            v-model="mytime.endTime"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
        <el-button style="margin-left: 10px" @click="screening" type="primary"
          >筛选</el-button
        >
        <el-button style="margin-left: 30px" type="primary" @click="add"
          >添加</el-button
        >
      </div>

      <!-- 表格 -->
      <el-table :data="mylist" border style="width: 100%; margin-top: 20px">
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="date" label="创建时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.date | formatTime }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="收支类型" width="170">
        </el-table-column>
        <el-table-column prop="describe" label="收支描述" width="170">
        </el-table-column>

        <el-table-column prop="income" label="收入" width="170">
        </el-table-column>

        <el-table-column prop="expend" label="支出" width="160">
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加的模态框 -->
      <el-dialog title="添加资金信息" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="收支类型" prop="type">
            <el-select v-model="ruleForm.type" placeholder="选择收支类型">
              <el-option label="提现" value="提现"></el-option>
              <el-option label="提现手续费" value="提现手续费"></el-option>
              <el-option label="充值" value="充值"></el-option>
              <el-option label="优惠券" value="优惠券"></el-option>
              <el-option label="充值礼券" value="充值礼券"></el-option>
              <el-option label="转账" value="转账"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="收支描述" prop="describe">
            <el-input v-model="ruleForm.describe"></el-input>
          </el-form-item>

          <el-form-item label="收入" prop="income">
            <el-input v-model="ruleForm.income"></el-input>
          </el-form-item>

          <el-form-item label="支出" prop="expend">
            <el-input v-model="ruleForm.expend"></el-input>
          </el-form-item>

          <el-form-item label="账户现金" prop="cash">
            <el-input v-model="ruleForm.cash"></el-input>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 编辑的模态框 -->
      <el-dialog title="编辑资金信息" :visible.sync="dialogFormVisible1">
        <el-form
          :model="ruleForm1"
          :rules="rules1"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="收支类型" prop="type">
            <el-select v-model="ruleForm1.type" placeholder="选择收支类型">
              <el-option label="提现" value="提现"></el-option>
              <el-option label="提现手续费" value="提现手续费"></el-option>
              <el-option label="充值" value="充值"></el-option>
              <el-option label="优惠券" value="优惠券"></el-option>
              <el-option label="充值礼券" value="充值礼券"></el-option>
              <el-option label="转账" value="转账"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="收支描述" prop="describe">
            <el-input v-model="ruleForm1.describe"></el-input>
          </el-form-item>

          <el-form-item label="收入" prop="income">
            <el-input v-model="ruleForm1.income"></el-input>
          </el-form-item>

          <el-form-item label="支出" prop="expend">
            <el-input v-model="ruleForm1.expend"></el-input>
          </el-form-item>

          <el-form-item label="账户现金" prop="cash">
            <el-input v-model="ruleForm1.cash"></el-input>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm1.remark"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm1">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 5, 7, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "funds",
  data() {
    return {
      id: "",
      // 筛选的  渲染
      mytime: {
        // 开始时间
        startTime: "",
        // 结束时间
        endTime: "",
        //  完整的 渲染
      },
      //  获取的总数据
      list: [],
      // 添加
      ruleForm: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
      },
      // 添加的校验
      rules: {
        remark: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        type: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "长度在 1到 6 个字符",
            trigger: ["blur", "change"],
          },
        ],
        describe: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        income: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        expend: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        cash: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
      },
      // 添加模态框的开关先设置为关
      dialogFormVisible: false,
      // 分页
      pagenum: 1, // 当前页
      pageSize: 5, // 当前页数
      // 编辑模态框的开关先设置为关
      dialogFormVisible1: false,
      // 编辑
      ruleForm1: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
      },
      // 编辑的校验
      rules1: {
        remark: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        type: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "长度在 1到 6 个字符",
            trigger: ["blur", "change"],
          },
        ],
        describe: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        income: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        expend: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        cash: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  created() {
    this.getdata();
  },
  computed: {
    total() {
      return this.list.length;
    },
    mylist() {
      return this.list.filter((item, index) => {
        // 先获取每页的第一条数据（起始数据）
        let start = (this.pagenum - 1) * this.pageSize;
        // 再获取到最后一条数据
        let end = this.pagenum * this.pageSize;
        // 然后返回包括第一条数据和最后一条数据以及这两条数据中间的每一条数据，
        // 这样就可以获取到每页的数据了，如果设置每页有5条数据的话，
        // 那么第一页的数据应该是获取下标大约等于0——小于5的数据，
        // 第二页就应该是获取下标大于等于5的数据——到下标小于10的数据，
        // 第三页就应该是获取下标大于等于10——下标小于15的数据，
        // 依次类推就可以获取到每页相应条数的数据
        return index >= start && index < end;
      });
    },
  },
  filters: {
    formatTime(val) {
      let time = new Date(val); //  北京标准时间
      let year = time.getFullYear(); //   年
      let obj = {
        mouth: time.getMonth() + 1, //  月
        day: time.getDate(), //  日
        hour: time.getHours(), //  分
        second: time.getSeconds(), //  秒
      };
      for (let i in obj) {
        obj[i] = obj[i] < 10 ? "0" + obj[i] : obj[i];
      }
      return `${year}-${obj.mouth}-${obj.day} ${obj.hour}:${obj.mouth}:${obj.second}`;
    },
  },
  methods: {
    // 筛选
    async screening() {
      // 定义一个变量来接收开始时间的时间戳
      let start = this.mytime.startTime.getTime();
      // 定义一个变量来接收结束时间的时间戳
      let end = this.mytime.endTime.getTime();
      // 过滤全部数据得到所有的时间
      let { data: res } = await this.$http({
        url: "/v1/vue3system/api/profiles",
      }).catch((err) => err);
      this.list = res;
      this.list = this.list.filter((item) => {
        // 用一个变量接收过滤出来的数据
        var obj = new Date(item.date).getTime();
        // 将大于初始时间小于结束时间的数据返回,&&与
        return obj >= start && obj <= end;
      });
      console.log(this.list);
    },
    // 分页           // 改变当前页条数
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pageSize = size;
    },
    // 页面跳转
    handleCurrentChange(pagenum) {
      console.log(`当前页: ${pagenum}`);
      this.pagenum = pagenum;
    },
    // 编辑   弹框
    handleEdit(row) {
      this.dialogFormVisible1 = true;
      this.ruleForm1 = row;
    },
    // 编辑    数据
    async submitForm1() {
      let result = await this.$http({
        url: `/v1/vue3system/api/profiles/edit/${this.ruleForm1._id}`,
        method: "post",
        data: this.ruleForm1,
      });
      console.log(result, "233");
      // 关闭模态框
      this.dialogFormVisible1 = false;
      this.$message("编辑成功");
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, "index");
      console.log(row, "23456");
      //  显示删除确认框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        // 删除记录
        let res = await this.$http({
          url: `/v1/vue3system/api/profiles/delete/${row._id}`, //  接口
          method: "DELETE",
        });
        console.log(res);

        if (res.status == 200) {
          // 渲染  获取最新记录
          this.getdata();
          // 提示信息
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        }
      });
    },
    // 添加    数据
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 请求接口
          let result = await this.$http({
            url: "/v1/vue3system/api/profiles/add",
            method: "post",
            data: this.ruleForm,
          });
          console.log(result, "233");
          this.getdata();
          // 关闭模态框
          this.dialogFormVisible = false;
          this.$message("添加成功");
          this.ruleForm = "";
        } else {
          // 验证表单
          return this.$message({ type: "error", message: "信息有误" });
        }
      });
    },
    // 添加  模态框显示
    add() {
      // 添加模态框的开关设置为开
      this.dialogFormVisible = true;
    },
    // 渲染页面
    async getdata() {
      let res = await this.$http({
        url: "/v1/vue3system/api/profiles",
        method: "get",
      });
      // 完整的
      this.list = res.data;
      // 筛选的
      console.log(this.list);
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
  p {
    margin-top: 10px;
  }
}
.box-card {
  margin-top: 10px;
  margin-left: 10px;
}
</style>